import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_business_2003a/pages/cart/cart_page.dart';
import 'package:flutter_business_2003a/pages/category_page.dart';
import 'package:flutter_business_2003a/pages/home_page.dart';
import 'package:flutter_business_2003a/pages/member/member_page.dart';
import 'package:flutter_business_2003a/provider/current_index_provider.dart';
import 'package:provider/provider.dart';

///AutomaticKeepAliveClientMixin 用于Flutter中保持页面设置,哪个页面需要保持,就使用with添加,类似于实现一个接口
///页面必须是StatefulWidget
///有两个前置的组件才能保持页面的状态,PageView和IndexedStack
///重写wantKeepAlive方法,修改为true
///实现的原理就是把页面堆叠成层叠布局,通过隐藏显示的方式来保持页面状态

class IndexPage extends StatelessWidget {
  final List<BottomNavigationBarItem> bottomTabs = [
    const BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: '首页'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), label: '分类'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), label: '购物车'),
    const BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), label: '会员中心'),
  ];

  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, //展示动画的方式
        currentIndex: Provider.of<CurrentIndexProvider>(context).currentIndex,
        items: bottomTabs,
        onTap: (index) {
          //每当点击导航栏item时,切换页面的状态,从而展示不同的页面
          Provider.of<CurrentIndexProvider>(context, listen: false)
              .changeIndex(index);
        },
      ),
      body: IndexedStack(
        index: Provider.of<CurrentIndexProvider>(context).currentIndex,
        children: [HomePage(), CategoryPage(), CartPage(), MemberPage()],
      ),
    );
  }
}
